<template>
  <div class="box">
    <div class="main-re">
      <div class="main-left">
        <div class="g-wrap6">
          <div class="n-mv">
            <div class="title" v-if="MvDetail.name">
              <h2 class="f-ff2 f-thlde" :title="MvDetail.name">
                <i class="icn2"></i>
                {{ MvDetail.name }}
              </h2>
              <span class="name">
                <router-link :to="{name:'Work',params: {id:MvDetail.artistId}}" class="s-fc7">{{MvDetail.artistName }}</router-link>
              </span>
            </div>
            <div class="title" v-if="VideoDetail">
              <h2 class="f-ff2 f-thlde" :title="VideoDetail.title">
                {{ VideoDetail.title }}
              </h2>
              <span class="name" v-if="VideoDetail.creator">by
                <router-link :to="{name:'UserDetailView',params:{id:VideoDetail.creator.userId,type:1}}" class="s-fc7">{{VideoDetail.creator.nickname }}</router-link>
              </span>
            </div>
            <div class="mv">
              <div class="m-ctvideo">
                <div class="player">
                  <video class="media"
                         ref="video"
                         @canplay="canplayFunc"
                         @timeupdate="timeupdateFunc"
                         @ended="endPlay"
                         @play="playFunc"
                         @pause="pauseFunc"
                         @error="getMvUrl"
                         :src="mvUrl"></video>
                  <div class="poster ffull">
                  </div>
                  <div class="play ffull" @mouseleave="leave()" @mouseenter="enter()" ref="play">
                    <a href="javascript:;" class="icn" @click="playMv()" v-show="isPause"></a>
                  </div>
                </div>
                <div class="controls" ref="controls">
                  <div class="progress">
                    <div class="j-out1"></div>
                    <div class="j-out2"></div>
                  </div>
                  <div class="wrap">
                    <div class="j-right">
                      <div class="duration" v-if="JSON.stringify(VideoDetail)!=='{}'">{{ voiceDuration(VideoDetail.durationms) }}</div>
                      <div class="duration" v-else>{{ voiceDuration(MvDetail.duration) }}</div>
                      <div class="volume">
                        <a href="javascript:;" class="mute" @click.prevent="showVol=!showVol"></a>
                        <div class="sliderbg" v-if="showVol">
                          <div class="j-slider">
                            <div class="out" style="height: 100%;">
                              <div class="in">
                                <span class="dot"></span>
                              </div>
                            </div>
                          </div>
                          <i class="arrow"></i>
                        </div>
                      </div>
                      <div class="brs">
                        <div class="bridge"></div>
                        <div class="current" @click="show=!show">
                          <span class="label">{{ videos[videoIndex] }}</span>
                        </div>
                        <ul class="options" v-if="show">
                          <li class="itm" :class="videoIndex==i?'z-sel':''" v-for="(itm,i) in videos" :key="i"
                              @click="changeVideo(i)">
                            <span class="label">{{ itm }}</span>
                            <a href="javascript:;" class="ffull"></a>
                          </li>
                          <li class="arrow"></li>
                        </ul>
                      </div>
                      <div class="full"></div>
                    </div>
                    <div class="foh">
                      <div class="j-left">
                        <span class="time">{{ nowTime }}</span>
                        <a href="javascript:;" class="play" v-if="isPause" @click="playMv"></a>
                        <a href="javascript:;" class="pause" v-else @click="pauseVideo"></a>
                      </div>
                      <div class="j-progress">
<!--                        <div class="progress-2">-->
<!--                          <div class="j-ht">-->
<!--                            &lt;!&ndash;                              <span class="hovertime"></span>&ndash;&gt;-->
<!--                            &lt;!&ndash;                              <span class="arrow"></span>&ndash;&gt;-->
<!--                          </div>-->
<!--                          <div class="j-out1 out" :style="'width:'+`${width}`+'%'">-->
<!--                            <div class="in">-->
<!--                              <span class="dot"></span>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                          <div class="j-out2 out" style="width: 0;"></div>-->
<!--                        </div>-->
                        <el-slider v-model="value1"
                                   class="sliderPlus"
                                   style="margin-top: 4px;"
                                   :show-tooltip="false"
                                   @change="setProcessFunc"
                                   :format-tooltip="formatTooltip"
                                   @mousedown.native="isDraging=true"
                                   @mouseup.native="isDraging=false"
                        ></el-slider>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="j-op">
              <a href="javascript:;" class="icon-1">
                <i>
                  <em class="icn icn-praise"></em>
                  ({{ count.likedCount || VideoDetail.praisedCount }})
                </i>
              </a>
              <a href="javascript:;" class="icon-2">
                <i>
                  ({{ MvDetail.subCount || VideoDetail.subscribeCount }})
                </i>
              </a>
              <a href="javascript:;" class="icon-3">
                <i>({{ MvDetail.shareCount || VideoDetail.shareCount }})</i>
              </a>
            </div>
          </div>
        </div>
        <Comment :commentId="$route.query.id"></Comment>
      </div>
      <div class="main-right">
        <div class="g-wrap7">
          <h3 class="u-hd4">MV简介</h3>
          <div class="m-mvintr">
            <p class="s-fc4" v-if="MvDetail.publishTime">发布时间：{{MvDetail.publishTime }}</p>
            <p class="s-fc4" v-if="VideoDetail.publishTime">发布时间：{{formatDate(VideoDetail.publishTime)}}</p>

            <p class="s-fc4" v-if="MvDetail.playCount">播放次数：{{formatNumber(MvDetail.playCount)}}次</p>
            <p class="s-fc4" v-if="VideoDetail.playTime">播放次数：{{formatNumber(VideoDetail.playTime)}}次</p>
            <p class="intr">{{VideoDetail.description}}</p>
          </div>
          <h3 class="u-hd4">相关推荐</h3>
          <ul class="m-rctlist">
            <li v-for="(mv,i) in SimiMv" :key="i">
              <div class="u-cover">
                <img v-lazy="mv.coverUrl" alt="">
                <p class="u-msk">
                  <span class="u-icn2"></span>
                  {{formatNumber(mv.playTime)}}
                </p>
                <router-link :to="{name:'MvDetail',query:{id:mv.vid}}" class="f-link" :title="mv.title"></router-link>
              </div>
              <div class="cnt">
                <p class="tit f-thlde">
                  <i class="tag" v-if="!isNaN(parseInt(mv.vid)) && isFinite(mv.vid)"></i>
                  <router-link :to="{name:'MvDetail',query:{id:mv.vid}}" :title="mv.title">{{mv.title}}</router-link>
                </p>
                <p class="s-fc4">{{voiceDuration(mv.durationms)}}</p>
                <p class="s-fc4 f-thlde">
                  <span :title="mv.creator[0].userName">
                    <span v-if="!(!isNaN(parseInt(mv.vid)) && isFinite(mv.vid))">by&nbsp;</span>
                    <router-link :to="{name:'UserDetailView',params:{id:mv.creator[0].userId,type:1}}">{{mv.creator[0].userName}}</router-link>
                  </span>
                </p>
              </div>
            </li>
          </ul>

          <h3 class="u-hd5">网易云音乐多端下载</h3>
          <ul class="m-multi">
            <li>
              <a href="https://apps.apple.com/cn/app/id590338362">
                iPhone
              </a>
            </li>
            <li>
              <a href="#">PC</a>
            </li>
            <li>
              <a href="#">Android</a>
            </li>
          </ul>
          <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {voiceDuration} from "@/utils/voiceDuration";
import Comment from "@/views/MvDetail/Comment";
import {formatNumber} from "@/utils/formatNumber";
import {formatDate} from "@/utils/formatDate";

export default {
  name: "index",
  components: {
    Comment
  },
  data() {
    return {
      value1:0,
      isDraging:false,
      formatDate:formatDate,
      mvUrl: '',
      isPause: true,
      MvDetail: {},
      VideoDetail: {},
      timer: null,
      audio: null,
      // 现在的时长
      nowTime: '00:00',
      width: 0,
      voiceDuration: voiceDuration,
      show: false,
      videos: ['1080P', '超 清', '高 清', '标 清'],
      videoIndex: 3,
      showVol: false,
      count: {},
      formatNumber:formatNumber,
      SimiMv:[]
    }
  },
  methods: {
    playFunc(e) {
      this.isPause = false
    },
    pauseFunc(e) {
      this.isPause = true
    },
    canplayFunc(e) {
      this.totalTimes = e.target.duration;
      this.audio.volume = 0.5;
    },
    timeupdateFunc(e) {
      if (!this.isDraging) {
        this.value1 = (e.target.currentTime) / this.totalTimes * 100
      }
    },
    setProcessFunc(val) {
      this.nowTime = this.voiceDuration(Math.round(val / 100 * this.audio.duration * 1000))
      this.audio.currentTime = Math.round(val / 100 * this.audio.duration)
      this.isDraging = false
    },
    formatTooltip(val) {
      if (val == 0 || val == null) return
      this.nowTime = this.voiceDuration(Math.round(val / 100 * this.audio.duration * 1000))
    },
    endPlay(){
      this.nowTime = '00:00'
      this.audio.currentTime = 0
      this.isPause = true
      this.width = 0
      this.audio.load()
    },
    changeVideo(i) {
      this.videoIndex = i
      this.show = false
    },

    move() {
      let isMove = false,
          timer = null;
      let that = this
      let play = this.$refs.play
      let controls =  this.$refs.controls
      play.onmousemove = function () {
        isMove = true;
        clearTimeout(timer);
        // console.log(isMove); // 移动时
        controls.style.transform = 'translateY(0)'
        timer = setTimeout(function () {
          isMove = false;
          // console.log(isMove); // 静止后
          if (!that.isPause) {
            clearTimeout(that.timer)
            that.timer = setTimeout(() => {
             controls.style.transform = 'translateY(100%)'
            }, 5000)
          }
        }, 200);

      }

    },

    leave() {
      if (!this.isPause) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$refs.controls.style.transform = 'translateY(100%)'
        }, 5000)
      }
    },
    enter() {
      if (this.timer != null) {
        clearTimeout(this.timer)
        this.$refs.controls.style.transform = 'translateY(0)'
        this.timer = null
      }
    },
    pauseVideo() {
      this.isPause = true
      this.$refs.video.pause()
      if (this.timer != null) {
        clearTimeout(this.timer)
        this.$refs.controls.style.transform = 'translateY(0)'
        this.timer = null
      }
    },
    playMv() {
      this.isPause = false
      this.$refs.video.play()
    },

    async getMvDetail() {
      if (!isNaN(parseInt(this.$route.query.id)) && isFinite(this.$route.query.id)) {
        let result = await this.$API.reqMvDetail(this.$route.query.id)
        let result2 = await this.$API.reqMvNum(this.$route.query.id)
        this.MvDetail = result.data.data
        this.count = result2.data
      } else {
        let result = await this.$API.reqVideoDetail(this.$route.query.id)
        this.VideoDetail = result.data.data
      }
    },
    async getSimi(){
      let result3 = await this.$API.reqSimiMv(this.$route.query.id)
      this.SimiMv = result3.data.data
    },
    async getMvUrl() {
      if (!isNaN(parseInt(this.$route.query.id)) && isFinite(this.$route.query.id)) {
        let result = await this.$API.reqMvUrl(this.$route.query.id)
        this.audio = this.$refs.video
        this.mvUrl = result.data.data.url
      } else {
        let result = await this.$API.reqVideoUrl(this.$route.query.id)
        this.audio = this.$refs.video
        this.mvUrl = result.data.urls[0].url
      }

    }
  },
  mounted() {
    this.getMvUrl()
    this.getMvDetail()
    this.move()
    this.getSimi()
  }
}
</script>

<style scoped lang="less">
/deep/.sliderPlus .el-slider__runway {
  background-color: rgba(255, 255, 255, 0.2);
  height: 5px;
}
/deep/.el-slider__bar {
  height: 5px;
}
/deep/.sliderPlus .el-slider__button {
  width: 4px;
  height: 4px;
}
.box {
  margin: 0 auto;
}

.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;

    .g-wrap6 {
      padding: 47px 30px 40px 39px;

      .n-mv {
        margin-top: -23px;

        .title {
          padding-top: 10px;
          margin-bottom: 8px;

          &::after {
            clear: both;
            content: '.';
            display: block;
            height: 0;
            visibility: hidden;
          }

          .f-ff2 {
            float: left;
            max-width: 100%;
            margin-top: -10px;
            margin-right: 8px;
            font-size: 24px;
            line-height: 32px;
            font-weight: normal;
            display: flex;

            .icn2 {
              margin: 7px 5px auto auto;
              width: 29px;
              height: 18px;
              background-position: -230px -480px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }
          }

          .name {
            float: left;
            margin: 4px 0 0 0;
            line-height: 17px;

            .s-fc7 {
              color: #0c73c2;
            }
          }
        }

        .mv {
          width: 640px;
          height: 360px;
          background-color: #2e2e2e;
          font-size: 0;
          line-height: 0;

          .m-ctvideo {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            font-size: 12px;
            line-height: 1.42857;
            color: #fff;
            overflow: hidden;

            .player {
              position: relative;
              width: 100%;
              height: 100%;
              box-sizing: border-box;

              .media {
                display: block;
                width: 100%;
                height: 100%;
                background: #000;
              }

              .ffull {
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0);
              }

              .poster {
                display: none;
                background: rgba(0, 0, 0, 0.1);

                .pic {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }

              .play {
                opacity: 1;

                .icn {
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 74px;
                  height: 74px;
                  margin-left: -37px;
                  margin-top: -37px;
                  background-position: center center;
                  background-repeat: no-repeat;
                  background-image: url("../../assets/下载.png");
                }
              }
            }

            .controls {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 42px;
              transform: translateY(0);
              transition: transform 0.2s ease-in;

              &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 79px;
                background: url(../../assets/down.png) repeat-x;
              }

              .progress {
                display: none;
                top: -4px;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                border-radius: 2px;
                background-color: rgba(255, 255, 255, 0.2);
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

                .j-out1 {

                }

                .j-out2 {

                }
              }

              .wrap {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;

                .j-right {
                  float: right;

                  .duration {
                    height: 34px;
                    margin-top: 0;
                    line-height: 34px;
                    color: rgba(255, 255, 255, 0.5);
                    position: static;
                    float: left;
                  }

                  .volume {
                    position: relative;
                    margin-left: 10px;
                    margin-right: 1px;
                    padding: 11px 10px;
                    float: left;

                    .mute {
                      display: block;
                      width: 16px;
                      height: 12px;
                      background: url(../../assets/down1.png) no-repeat center center;
                    }

                    .sliderbg {
                      //display: none;
                      position: absolute;
                      top: -2px;
                      left: 6px;
                      width: 22px;
                      height: 86px;
                      border: 1px solid rgba(255, 255, 255, 0.2);
                      border-bottom: none;
                      background: rgba(0, 0, 0, 0.7);
                      -ms-transform: translateY(-100%);
                      transform: translateY(-100%);

                      .j-slider {
                        position: relative;
                        width: 4px;
                        height: 70px;
                        margin: 6px 9px;
                        border-radius: 2px;
                        background-color: rgba(255, 255, 255, 0.2);

                        .out {
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          width: 100%;
                          background: #b2072a;
                          border-radius: 2px;

                          .in {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            height: 100%;

                            .dot {
                              cursor: pointer;
                              position: absolute;
                              top: -8px;
                              left: -8px;
                              display: block;
                              width: 20px;
                              height: 20px;
                              background: url(../../assets/down4.png) no-repeat center;
                            }
                          }
                        }
                      }

                      .arrow {
                        display: block;
                        position: absolute;
                        top: auto;
                        bottom: -7px;
                        left: 0;
                        right: auto;
                        width: 100%;
                        height: 7px;
                        background: url(../../assets/down2.png) no-repeat;
                        background-position: center top;
                        cursor: default;
                      }
                    }
                  }

                  .brs {
                    position: relative;
                    width: 50px;
                    height: 17px;
                    margin-top: 9px;
                    z-index: 3;
                    float: left;

                    &:before {
                      left: 0;
                    }

                    &:after {
                      right: 0;
                    }

                    &:before, &:after {
                      content: '';
                      position: absolute;
                      top: 0;
                      display: block;
                      width: 1px;
                      height: 100%;
                      background: rgba(255, 255, 255, 0.2);
                    }

                    .bridge {

                    }

                    .current {
                      line-height: 17px;
                      text-align: center;
                      color: rgba(255, 255, 255, 0.5);
                      cursor: default;


                      .label {
                        line-height: 17px;
                        text-align: center;
                        color: rgba(255, 255, 255, 0.5);
                        cursor: default;

                        &:after {
                          content: '';
                          display: inline-block;
                          width: 100%;
                          height: 0;
                        }
                      }
                    }

                    .options {
                      //display: none;
                      position: absolute;
                      top: -13px;
                      left: -8px;
                      width: 66px;
                      box-sizing: border-box;
                      border: 1px solid rgba(255, 255, 255, 0.2);
                      border-bottom: none;
                      background: rgba(0, 0, 0, 0.7);
                      -ms-transform: translateY(-100%);
                      transform: translateY(-100%);

                      li {

                      }

                      .z-sel {
                        border-top-color: transparent;
                        background: rgba(255, 255, 255, 0.2);

                        &:before {
                          content: '';
                          position: absolute;
                          top: 9px;
                          left: 4px;
                          display: block;
                          width: 10px;
                          height: 8px;
                          background: url(../../assets/gou.png) no-repeat center;
                        }
                      }

                      .itm {
                        position: relative;
                        height: 26px;
                        padding: 0;
                        line-height: 26px;
                        border: none;
                        border-top: 1px solid rgba(255, 255, 255, 0.2);

                        &:first-child {
                          border-top-color: transparent;
                        }

                        .label {
                          position: relative;
                          display: block;
                          width: 100%;
                          height: 100%;
                          padding: 0 10px 0 18px;
                          box-sizing: border-box;
                          text-align: justify;
                          overflow: hidden;
                        }

                        .ffull {
                          position: absolute;
                          display: block;
                          top: 0;
                          left: 0;
                          bottom: 0;
                          right: 0;
                          width: 100%;
                          height: 100%;
                          background: rgba(255, 255, 255, 0);
                        }
                      }
                    }
                  }

                  .full {
                    display: block;
                    width: 34px;
                    height: 34px;
                    float: right;
                    background: url(../../assets/down3.png) no-repeat center;
                  }
                }

                .foh {
                  overflow: hidden;
                  position: relative;
                  top: -20px;

                  .j-left {
                    float: left;
                    position: relative;
                    top: 20px;

                    .time {
                      height: 34px;
                      margin: 0;
                      line-height: 34px;
                      color: rgba(255, 255, 255, 0.5);
                      position: static;
                    }

                    .play {
                      width: 34px;
                      height: 32px;
                      margin: 0 6px;
                      float: left;
                      background: url(../../assets/play-3.png) no-repeat center;
                    }

                    .pause {
                      background: url(../../assets/play10.png) no-repeat center;
                      width: 34px;
                      height: 32px;
                      margin: 0 6px;
                      float: left;
                    }
                  }

                  .j-progress {
                    position: relative;
                    height: 34px;
                    padding: 15px 12px 0;
                    overflow: hidden;

                    .progress-2 {
                      top: 35px;
                      left: 10px;
                      right: 10px;
                      width: auto;
                      position: absolute;
                      height: 4px;
                      border-radius: 2px;
                      background-color: rgba(255, 255, 255, 0.2);
                      cursor: pointer;
                      -webkit-user-select: none;
                      -moz-user-select: none;
                      -ms-user-select: none;
                      user-select: none;

                      .out {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        border-radius: 2px;
                      }

                      .j-out1 {
                        background-color: #b2072a;
                        z-index: 2;

                        .in {
                          position: absolute;
                          top: 0;
                          left: 0;
                          right: 0;
                          height: 100%;

                          .dot {
                            position: absolute;
                            top: -10px;
                            right: -12px;
                            display: block;
                            width: 24px;
                            height: 24px;
                            background: url('../../assets/dot3.png') no-repeat center;
                          }
                        }
                      }

                      .j-out2 {
                        background-color: rgba(255, 255, 255, 0.3);
                        z-index: 1;
                      }

                      .j-ht {
                        //display: none;
                        position: absolute;
                        //top: -27px;
                        min-width: 44px;

                        .hovertime {
                          border: 1px solid rgba(255, 255, 255, 0.2);
                          padding: 5px;
                          background: rgba(0, 0, 0, 0.7);
                        }

                        .arrow {
                          bottom: -10px;
                          display: block;
                          position: absolute;
                          top: auto;
                          left: 0;
                          right: auto;
                          width: 100%;
                          height: 7px;
                          background: url(../../assets/down2.png) no-repeat;
                          background-position: center top;
                          cursor: default;
                        }

                      }
                    }
                  }
                }
              }
            }
          }
        }

        .j-op {
          margin: 12px 0 45px;

          a {
            margin-right: 10px;
            color: #333;
            float: left;
            text-decoration: none;
            padding: 0 5px 0 0;
            white-space: nowrap;
            height: 31px;
            line-height: 31px;
            cursor: pointer;
            background-image: url("../../assets/button2.png");
          }

          .icon-1 {
            background-position: right -100px;

            i {
              padding: 0 5px 0 10px;
              color: #333;
              background-position: 0 -59px;
              pointer-events: none;
              display: inline-block;
              height: 31px;
              line-height: 31px;
              cursor: pointer;
              background-image: url("../../assets/button2.png");

              em {
                width: 17px;
                height: 15px;
                margin: 8px 6px 0 0;
                background-image: url("../../assets/button2.png");
                float: left;
                background-position: 0 -95px;
              }
            }
          }

          .icon-2 {
            background-position: right -1020px;

            i {
              background-position: 0 -977px;
            }
          }

          .icon-2 i, .icon-3 i {
            padding: 0 7px 0 30px;
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            cursor: pointer;
            background-image: url("../../assets/button2.png");
          }

          .icon-3 {
            line-height: 30px;
            background-position: right -1020px;

            i {
              background-position: 0 -1225px;
            }
          }
        }
      }
    }
  }
}

.main-right {
  width: 270px;
  height: 800px;
  float: right;

  .g-wrap7 {
    padding: 20px 40px 40px 30px;

    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-piclist {
      height: auto;
      overflow: hidden;
      margin-left: -13px;
      padding-bottom: 25px;

      li {
        width: 53px;
        height: 53px;
        display: inline;
        float: left;
        padding: 0 0 13px 13px;

        a {
          width: 40px;
          height: 40px;

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    .u-hd4 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-mvintr {
      margin-top: -4px;
      padding-bottom: 34px;
      .intr {
        margin-top: 10px;
        color: #333;
      }
      p {
        line-height: 18px;
        color: #999;
      }
    }

    .m-rctlist {
      margin-bottom: 20px;
      overflow: hidden;
      height: auto;

      li {
        float: left;
        width: 200px;
        margin-bottom: 15px;

        .u-cover {
          width: 96px;
          height: 54px;
          position: relative;
          display: block;
          float: left;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }

          .u-msk {
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 5px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            box-sizing: border-box;
            text-align: right;
            text-shadow: -2px 1px rgb(0 0 0 / 40%);
            width: 90px;
            display: inline-block;
            background-image: url("../../assets/mask.png");
            background-position: 0 0;
            .u-icn2 {
              margin: -2px 0px 0 0;
              width: 15px;
              height: 10px;
              background-position: -60px -310px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }
          }

          .f-link {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .cnt{
          margin-left: 105px;
          p{
            line-height: 16px;
          }
          .tit{
            line-height: 21px;
            .tag{
              margin: -1px 4px auto auto;
              width: 26px;
              height: 16px;
              background-position: -270px -480px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }
            a{
              color: #333;
            }
          }
          .s-fc4{
            color: #999;
            span{
              a{
                color: #999;
              }
            }
          }
        }
      }
    }

    .u-hd5 {
      height: 23px;
      margin-top: 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-multi {
      height: 65px;
      margin-bottom: 10px;
      background-position: 0 -392px;
      background-image: url("../../assets/sprite.png");

      li {
        float: left;

        &:nth-child(1) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }

        &:nth-child(2) {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;

          a {
            display: inline-block;
            text-indent: -9999px;
            width: 60px;
            height: 48px;
          }
        }

        &:nth-child(3) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }
      }
    }

    .mu-p {
      color: #999;
    }
  }
}
</style>